﻿@{
    ViewBag.PageTitle = Resources.Intercamber.Reporting_PageName;
}
@section PageHead
{
    <script src="~/Scripts/Flot/jquery.flot.min.js"></script>
    <script src="~/Scripts/Flot/jquery.flot.time.min.js"></script>
    <script>
        // actual number connected users
        $(function() {
            hubReady.done(function() {
                window.connectedHub.server.joinGroup("Admin.Stats");
            });
        });

        function notifyNumberConnectedUsers(num) {
            $("#nbConnectedUsers").html(num);
        }

        var loadData = function() {
            $.ajax({
                type: "POST",
                url: "/Admin/StatisticsConnectionData",
                contentType: "application/json; charset=utf-8",
                async: false,
                data: JSON.stringify({
                    from: $("#from").val(),
                    to: $("#to").val(),
                    detail: $("#detail").val()
                }),
                dataType: "json",
                success: function(result) {
                    for (var i = 0; i < result.length; i++)
                        result[i][0] = instanciateDotNetDate(result[i][0]);
                    $.plot("#chart1", [{ data: result, label:"@Resources.Intercamber.Statistics_NumberConnecteConnections" }], {
                        lines: {
                            show: false
                        },
                        points: {
                            show: true
                        },
                        series: {
                            bars: {
                                show: true,
                                barWidth: 0.6,
                                align: "center"
                            }
                        },
                        xaxis: { mode: "time" },
                        grid: {
                            hoverable: true,
                            clickable: true
                        }
                    });
                },
                error: function(result) {
                    alert("Service error!");
                    debugger;
                }
            });
        };

        // plot connections
        $(function() {

            var calOptions = {
                showOn: "button",
                buttonImage: "/Images/Calendar.png",
                buttonImageOnly: true,
                dateFormat: "dd/mm/yy"
            };
            $("#from").datepicker(calOptions);
            $("#to").datepicker(calOptions);

            loadData();

            // chart data tooltip
            var tooltip = $('#chart1').qtip({
                id: 'chart1',
                prerender: true,
                content: ' ',
                position: {
                    target: 'mouse',
                    viewport: $('#chart1'),
                    adjust: {
                        x: 5
                    }
                },
                show: false,
                hide: {
                    event: false,
                    fixed: true
                }
            });

            var previousPoint = null;
            $("#chart1").bind("plothover", function(event, coords, item) {
                var graph = $(this), api = graph.qtip();

                // If we weren't passed the item object, hide the tooltip and remove cached point data
                if (!item) {
                    api.cache.point = false;
                    return api.hide(item);
                }

                previousPoint = api.cache.point;
                if (previousPoint !== item.dataIndex) {
                    api.cache.point = item.dataIndex;
                    var date = new Date(item.datapoint[0]);

                    var detail = $("#detail").val();
                    if (detail == "hour")
                        api.set('content.text', date.formatDate("dd/MM/yyyy HH") + "h <b>" + item.datapoint[1] + "</b>");
                    else
                        api.set('content.text', date.formatDate("dd/MM/yyyy") + " <b>" + item.datapoint[1] + "</b>");
                    api.elements.tooltip.stop(1, 1);
                    api.show(item);
                }
            });

            $(".jqbutton").button();
        });        

    </script>
}

@section PageLeftBar {
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}

@section PageContent {
    <div class="ui-corner-all widget" style="padding:6px;">
        @Resources.Intercamber.Statistics_NumberConnectedUsers: <b><span id="nbConnectedUsers">@ViewBag.NbUserConnected</span></b>
        <div style="margin-top:5px;">
            @Resources.Intercamber.Statistics_DetailBy
            <select id="detail">
                <option value="day" selected="selected">@Resources.Intercamber.Day</option>
                <option value="hour">@Resources.Intercamber.Hour</option>
            </select>
            &nbsp;
            @Resources.Intercamber.From 
            <input type="text" id="from" value="@(DateTime.Now.AddDays(-30).ToString("dd/MM/yyyy"))" class="ui-widget-content" />
            &nbsp;@Resources.Intercamber.To
            <input type="text" id="to" value="@(DateTime.Now.AddDays(1).ToString("dd/MM/yyyy"))" class="ui-widget-content" />
            &nbsp;&nbsp;
            <button class="jqbutton" onclick="loadData(); return false;">@Resources.Intercamber.Display</button>
        </div>
        <div id="chart1" style="height:400px; width:800px; margin: 10px 20px;"></div>
    </div>
    
}
